<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <meta charset="utf-8">
    <title>数据统计</title>
    <link rel="stylesheet" type="text/css" href="../css/data.css">
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.7.2/echarts-en.min.js"></script>
    <script type="text/javascript" src="../js/config.js"></script>
    <style type="text/css">
      .top{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50%;

        /*background-color: green;*/
      }
      .top .left{
        width: 50%;
        float: left;
        height: 100%;
        border: 5px solid #fff;
        border-top: 20px solid #fff;
        border-left: 20px solid #fff;
        box-sizing: border-box;

        
      }
      .top .right{
        width: 50%;
        float: right;
        height: 100%;
        border: 5px solid #fff;
        box-sizing: border-box;
        border-top: 20px solid #fff;
        border-right: 20px solid #fff;

        
      }
      .bottom{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        /*background-color: blue;*/
      }
      .bottom .left{
        width: 50%;
        float: left;
        height: 100%;
        border: 5px solid #fff;
        box-sizing: border-box;
        border-bottom: 20px solid #fff;
        border-left: 20px solid #fff;

        
      }
      .bottom .right{
        width: 50%;
        float: right;
        height: 100%;
        border: 5px solid #fff;
        box-sizing: border-box;
        border-bottom: 20px solid #fff;
        border-right: 20px solid #fff;

        
      }
    </style>
  </head>
  <body>
  <div class="top">
    <div class="left">
      <div class="index-center-left">
        <div class="pick1">
          <p class="title">今日交易量</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>
        <div class="pick2">
          <p class="title">本月交易量</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>  
        <div class="pick0">
          <p class="title">累计交易量</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>  
        <div class="pick3">
          <p class="title">今日入库数</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>  
        <div class="pick4">
          <p class="title">本月入库数</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>  
        <div class="pick5">
          <p class="title">累计入库数</p>
          <p class="num">
            0<span>台</span>
          </p>
        </div>     
      </div>
    </div>
    <div class="right">
      <div class="index-bottom-rank">
        <div class="title">排行榜</div>
        <div class="box">
          <div class="nav">
            <span class="nav-list on">今日入库</span>
            <span class="nav-list">按品牌</span>
            <!-- <span class="nav-list">按颜色</span> -->
            <!-- <span class="nav-list">按车型</span> -->
            <span class="nav-list">按业绩</span>
            <span class="nav-list">按成交量</span>
            <span class="nav-list">按价格</span>
          </div>
          <div class="info-warp">
            <div class="info-box on" id="brandRank"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="left">
      <div class="index-bottom-bar">
        <div class="title">各市场车辆成交情况</div>
        <div class="box" id="zhu">
          
        </div>
      </div>
    </div>
    <div class="right">
      <div class="index-center-right">
        <div class="title">各市场车辆入库情况</div>
        <div class="box" id="zhu1" style="box-sizing: border-box;padding: 25px;">
          
        </div>
      </div>
    </div>
  </div>
<!--   <div class="index-box" id="contentCenter">
		<div class="index-center clearfix" >
			
      
		</div>
    <div class="index-bottom clearfix">
      
      
    </div>
  </div> -->
  <div class="loading"></div>
 
  <script type="text/javascript">
    document.documentElement.style.fontSize=document.documentElement.clientWidth/120+'px';
    var rem = document.documentElement.clientWidth/120;
  var numAjax=0;
  $(document).ajaxSuccess(function(evt, request, settings){  
    numAjax++;
    if (numAjax>=3) {
      $('.loading').hide()
    }
  }); 

  var boxHeight = $('.bottom .left').height()-4*rem
  $('.box').height(boxHeight+'px');
  var rankHeight = boxHeight-2.5*rem;
  $('.info-warp').height(rankHeight+'px')


    </script>
     <script type="text/javascript" src="../js/show.js"></script>
  </body>
</html>

